
INDEX_HTML_CONTENT = """
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Live Stream & Data Dashboard</title>
    <style>
        /* Basic Reset & Body Styling */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            background-color: #f0f2f5; /* Light gray background */
            color: #333;
            line-height: 1.6;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center; /* Center the main container */
        }

        /* Main Container for the whole page content */
        .dashboard-container {
            width: 100%;
            max-width: 1400px; /* Max width for very large screens */
            background-color: #ffffff; /* White background for the content area */
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); /* Softer shadow */
            padding: 25px;
            overflow: hidden; /* Contains floats/flex items */
        }

        header h1 {
            text-align: center;
            color: #1a202c; /* Darker heading color */
            margin-bottom: 25px;
            font-size: 2em;
            font-weight: 600;
        }

        /* Main content area with two columns */
        .main-content {
            display: flex;
            flex-wrap: wrap; /* Allow wrapping on smaller screens if needed */
            gap: 25px; /* Space between columns */
        }

        /* Video Column Styling */
        .video-column {
            flex: 2; /* Video column takes more space */
            min-width: 320px; /* Minimum width for video before wrapping/shrinking */
            display: flex;
            flex-direction: column;
        }

        .video-wrapper {
            position: relative;
            width: 100%;
            /* Maintain aspect ratio for video (e.g., 16:9) */
            /* padding-top: 56.25%;  If you want a fixed aspect ratio container */
            background-color: #111; /* Dark background for video area */
            border-radius: 8px;
            overflow: hidden; /* To clip the img if it's larger */
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            min-height: 300px; /* Minimum height for the video area */
        }

        .video-wrapper img {
            width: 100%;
            height: 100%; /* Make image fill the wrapper if wrapper has fixed height */
            object-fit: contain; /* Scales image while maintaining aspect ratio, fitting within bounds */
            /* object-fit: cover; /* Scales image to fill, cropping if necessary */
            display: block; /* Remove extra space below image */
            border-radius: 8px; /* Match wrapper's border radius */
        }
        
        /* Data Column Styling */
        .data-column {
            flex: 1; /* Data column takes less space */
            min-width: 300px; /* Minimum width for data before wrapping/shrinking */
            background-color: #f8fafc; /* Slightly off-white for data section */
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            display: flex;
            flex-direction: column;
        }

        .data-column h2 {
            color: #2d3748; /* Darker subheading */
            margin-bottom: 15px;
            font-size: 1.4em;
            border-bottom: 2px solid #e2e8f0; /* Subtle separator */
            padding-bottom: 8px;
        }

        #data_display_container {
            flex-grow: 1; /* Allow this to take available space */
            overflow-y: auto; /* Scroll if content overflows */
            background-color: #fff; /* White background for pre tag area */
            border: 1px solid #e2e8f0; /* Light border */
            border-radius: 6px;
            padding: 15px;
        }

        #data_display {
            font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
            font-size: 0.875em; /* Slightly smaller for mono font */
            white-space: pre-wrap; /* Wrap long lines in pre */
            word-break: break-all; /* Break long words/strings */
            color: #334155; /* Darker text for data */
            margin: 0; /* Remove default pre margin */
        }

        /* Placeholder/Loading Styles */
        #video_frame[alt="Loading video stream..."] {
            display: flex;
            align-items: center;
            justify-content: center;
            color: #a0aec0; /* Lighter text for placeholder */
            font-style: italic;
        }

        /* Responsive Adjustments (Optional - for smaller screens) */
        @media (max-width: 768px) {
            .main-content {
                flex-direction: column; /* Stack columns vertically */
            }
            .video-column, .data-column {
                flex: 1 1 100%; /* Each column takes full width */
                margin-bottom: 20px;
            }
            .video-column {
                margin-bottom: 20px; /* Add space below video when stacked */
            }
             header h1 {
                font-size: 1.6em;
            }
            .data-column h2 {
                font-size: 1.2em;
            }
        }

    </style>
</head>
<body>
    <div class="dashboard-container">
        <header>
            <h1>RDK_X5图像和数据实时显示</h1>
        </header>

        <div class="main-content">
            <div class="video-column">
                <!-- The image will be dynamically sized by its parent .video-wrapper -->
                <div class="video-wrapper">
                    <img id="video_frame" src="{{ url_for('video_feed') }}" alt="Loading video stream...">
                </div>
            </div>

            <div class="data-column">
                <h2>数据实时显示</h2>
                <div id="data_display_container">
                    <pre id="data_display">Fetching data...</pre>
                </div>
            </div>
        </div>
    </div>

    <script>
        const videoFrame = document.getElementById('video_frame');
        const dataDisplay = document.getElementById('data_display');

        function fetchData() {
            fetch("{{ url_for('get_data') }}")
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    dataDisplay.textContent = JSON.stringify(data, null, 2); // Pretty print JSON
                })
                .catch(error => {
                    console.error('Error fetching data:', error);
                    dataDisplay.textContent = `Error fetching data: ${error.message}`;
                });
        }

        // Set interval to fetch data
        setInterval(fetchData, 1000); // Fetch every 1 second

        // Initial fetch
        fetchData();

        // Optional: Handle image loading errors for the video stream
        videoFrame.onerror = function() {
            this.alt = "Video stream failed to load or is unavailable.";
            // You could also replace the src with a placeholder image
            // this.src = "placeholder-video-error.png"; 
            console.error("Error loading video stream.");
        };
        videoFrame.onload = function() {
            // Optional: If you had a placeholder, remove it or change style
            this.alt = "Live video stream"; // Update alt text on successful load
        };

    </script>
</body>
</html>
"""
